<style></style>
<template>
    <div class="home">
        <header>
            <van-search
                v-model="searchKey"
                @search="onSearch"
                placeholder="请输入搜索关键词"
            />
        </header>
        <van-tabs v-model="activeIndex">
            <van-tab title="热销">
                <div class="goods-list">
                    <div class="col" v-for="g in goodsList" :key="g.id">
                        <router-link :to="'/detail?id=' + g.id">
                            <div class="goods-item">
                                <div class="goods-image">
                                    <img :src="g.picture" alt="" />
                                </div>
                                <div class="goods-info">
                                    <div class="goods-title">{{ g.title }}</div>
                                    <van-row>
                                        <van-col span="12">
                                            <div class="goods-price">
                                                ￥ {{ g.price }}
                                            </div>
                                        </van-col>
                                        <van-col span="12">
                                            <div
                                                class="goods-sell-count text-right"
                                            >
                                                已售 {{ g.sell_count }} 件
                                            </div>
                                        </van-col>
                                    </van-row>
                                </div>
                            </div>
                        </router-link>
                    </div>
                </div>
            </van-tab>
            <van-tab title="生鲜">
                <van-row>
                    <van-col span="12" v-for="g in goodsList" :key="g.id">
                        <div class="goods-item" @click="showDetail(g)">
                            <div class="goods-image">
                                <img :src="g.picture" alt="" />
                            </div>
                            <div class="goods-title">{{ g.title }}</div>
                            <div class="goods-price">￥ {{ g.price }}</div>
                            <div class="goods-sell-count">
                                已售 {{ g.sell_count }} 件
                            </div>
                        </div>
                    </van-col>
                </van-row>
            </van-tab>
            <van-tab title="家电">内容 3</van-tab>
            <van-tab title="数码">内容 4</van-tab>
            <van-tab title="服饰">内容 4</van-tab>
            <van-tab title="家电">内容 3</van-tab>
            <van-tab title="数码">内容 4</van-tab>
            <van-tab title="服饰">内容 4</van-tab>
            <van-tab title="家电">内容 3</van-tab>
            <van-tab title="数码">内容 4</van-tab>
            <van-tab title="服饰">内容 4</van-tab>
            <van-tab title="家电">内容 3</van-tab>
            <van-tab title="数码">内容 4</van-tab>
            <van-tab title="服饰">内容 4</van-tab>
        </van-tabs>
    </div>
</template>
<script>
import api from "./../components/api";
import { Toast } from "vant";
import CategoryTab from "../components/CategoryTab.vue";
export default {
    components: { CategoryTab },
    data() {
        return {
            timeNow: "123",
            searchKey: "",
            activeIndex: 0,
            goodsList: [],
        };
    },
    // 前端默认加载数据
    mounted() {
        api.get("/goods/home")
            .then((result) => {
                if (result.code == 0) {
                    // 查询成功 将数据绑定到对应的属性
                    this.goodsList = result.data;
                } else {
                    // 查询失败 提示消息
                    Toast(result.message);
                }
            })
            .catch((err) => {
                alert(err.message);
            });
    },
    methods: {
        onSearch() {
            this.$router.push("/search?key=" + this.searchKey);
        },
        showDetail(g) {
            this.$router.push("/detail?id=" + g.id);
        },
    },
};
</script>
